<!-- 滚动吸附效果演示 -->
<template>
  <view class="content">
    <head-box></head-box>
    <!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
    <z-paging v-if="elegantList.length" class="tab-botton" auto-show-back-to-top ref="paging"   :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
              :refresher-threshold="160"  @query="queryList"
              :refresher-status.sync="refresherStatus"
              :list.sync="dataList" style="min-height:calc(100% - 160rpx);"

    >
      <vueSearch @confirm="onSearchBlur"  :isEmpty="true"></vueSearch>
      <classification
          :currentTab="elegantTab"
          :navList="elegantList"
          @click="onTabelegantTabClick"
      ></classification>
      <change-swiper-current
          :list="topnews"
          :isShow="false"
          v-if="topnews.length"
      ></change-swiper-current>
      <!-- 自定义下拉刷新view -->
      <custom-refresher slot="refresher"  :status="refresherStatus">
      </custom-refresher>
      <!-- 自定义没有更多数据view -->
      <custom-nomore slot="loadingMoreNoMore"></custom-nomore>
      <!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
      <view class="classVideoListPage-content list">
        <view class="classVideo-item" v-for="(item, index) in dataList" :key="index">
          <view class="class_news_box"   @tap="onClassVideItem(item)">
            <view class="new_con">{{item.newsTitle}}</view>
            <view class="new_img">
              <image class="_img" :src="item.imageUrl" mode="aspectFill"></image>
            </view>
          </view>
          <view class="class_news_box_b">
            <view class="news_date">{{item.newsOrg}}  {{item.publishTime}}</view>
            <view class="news_dz"><image class="dzimg" src="/static/img/ready-icon.png"></image> {{item.readTimes}}</view>
            <view class="news_zf"><image class="dzimg" src="/static/img/dz.png"></image> {{item.dzTimes}}</view>
          </view>
        </view>
      </view>
    </z-paging>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
import {gpNewsList } from '@/common/request.js';
import { getimgurl,DatetimeToShortTime } from '@/common/functions.js';
import customrefresher from "@/components/custom-refresher/custom-refresher"
import customnomore from "@/components/custom-nomore/custom-nomore"
import classification from '@/components/classification'
import tabsview from "@/components/tabs-view/tabs-view"
import vueSearch from '@/components/search'
import { createTime_begin } from '@/common/type'
import {getDictItemstList} from '@/api/dict'
export default {
  components: {
    vueSearch,
    tabsview,
    customnomore,
    customrefresher,
    classification
  },
  data() {
    return {
      refresherStatus:0,
      newsTitle:'',//新闻标题
      dataList: [],
      topnews:[],
      params:{},
      elegantTab: 0, //风采导航第几项
      elegantList:[], //风采导航名称
      typeData:{},
    }
  },
  onLoad(opt) {
    this.typeData = {...opt}

    this.getNewsDictItemstList()
  },
  onPullDownRefresh() {
    //重新加载数据
    this.$nextTick(()=>{
      uni.stopPullDownRefresh();
      this.$refs.paging.reload();

    })
  },
  onShow(){
    // #ifdef H5
    console.log('分享')
    this.$wxSetShare()
    // #endif

    if( this.elegantList.length){
      this.$nextTick(()=>{
        this.$refs.paging.reload();
      })
    }

  },
  methods: {
    //点击风采展示详情
    onClassVideItem(item){
      this.$api.handleMenu(`/pages/newsDetail/newsDetail?id=${item.id}`)
    },
    //新闻风采分类
    getNewsDictItemstList () {
      const plist = []
      getDictItemstList ({dictCode: 'news_type'}).then (res => {
        const {code , result} = res
        if (code === 0 || code === 200) {
          result.map (item => {
            const {
              title ,
              value
            } = item
            plist.push ({
              cate_name: title , newsType: value , type: value ,
            })
          })
          this.elegantList = plist
         const index= this.elegantList.findIndex(item=>this.typeData.code===item.type)
          if(plist.length){
            this.elegantTab =index
          }

        }
      }).catch (e => {
        console.log (e)
      })
    } ,
    //风采点击分类
    onTabelegantTabClick( index) {
      this.elegantTab = index
      this.newsTitle = ''
      this.newsList = []
      this.topnewsList = []
      this.$refs.paging.reload();
    },
    //搜索
    onSearchBlur(value) {
      this.newsTitle = value
      this.$refs.paging.reload();
    },
    queryList(pageNo, pageSize) {
      const newsType =this.elegantList[this.elegantTab]?.newsType
      let params = {

        pageNo,
        pageSize,
        isPublish: 1,
        isTop: '2',
        order: 'desc',
        newsTitle:`*${this.newsTitle}*`,
      }
      //数据，判断是否与newsType相同
      const newsObject={
        type1:['0'],
        type2:['2'],
        type3:['1','6','8','9','10']
      }
      if(newsObject.type1.includes(newsType)){
        this.params.column='read_times'
        this.params.createTime_begin=createTime_begin()
        params.column= this.params.column
        params.createTime_begin=this.params.createTime_begin
      }else if(newsObject.type2.includes(newsType)){
        this.params.column='publish_time'
        params.column= this.params.column
      } else if(newsObject.type3.includes(newsType)){
        this.params.column='publish_time'
        params.column= this.params.column
        params.newsType=newsType
      }
      gpNewsList(pageSize,pageNo,params).then(res => {
        if(res.success)
        {
          let list = []
          res.result.records.forEach(ele => {
            var n = {id:ele.id,newsOrg:ele.newsOrg,imageUrl:getimgurl(ele.imageUrl),newsTitle:ele.newsTitle,publishTime:DatetimeToShortTime(ele.publishTime),readTimes:ele.readTimes,dzTimes:ele.dzTimes}
            // params = {"newsId":ele.id}
            // getNewsOperateTimes(params).then(res => {
            // 	if(res.success)
            // 	{
            // 		let readTimes = res.result.readTimes;
            // 		let dzTimes = res.result.dzTimes;
            // 		n.readTimes = readTimes;
            // 		n.dzTimes = dzTimes;
            // 	}
            // });
            list.push(n);
          })
          this.$refs.paging.addData(list);
        }
      });
    },
  }
}
</script>

<style  lang="scss">
/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */

/*如果有scoped，page的css设置建议放在App.vue中 */
page {
  height: 100%;
}

.content {
  height: 100%;
  /* 父节点建议开启flex布局 */
  display: flex;
  flex-direction: column;
  background-color: #f8faf9;
}

.banner-view {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item {
  position: relative;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 30rpx;
}

.item-detail {
  padding: 5rpx 15rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: white;
  background-color: #007AFF;
}

.item-line {
  position: absolute;
  bottom: 0rpx;
  left: 0rpx;
  height: 1px;
  width: 100%;
  background-color: #eeeeee;
}
.swiper-wrapper
{
  position:relative;
  overflow: hidden;
  height:400rpx;
  .point
  {
    position: absolute;
    right: 30px;
    height: 70rpx;
    display: flex;
    align-items: center;
    bottom: 0;
    z-index: 3;
    .li
    {
      width: 14rpx;
      height: 14rpx;
      border-radius: 50%;
      background-color: #fff;
      margin-left: 10rpx;

    }
    .active
    {
      background-color:#007AFF
    }
  }
}
.swiper
{
  height:400rpx;
  width: 100%;
  .TopNews{
    height:100%;
    width: 100%;
    .img{
      width:100%;
      height: 100%;
    }
    .desc{
      position:absolute;
      z-index:10;
      left:0;
      right:0;
      bottom:0;
      background-color:rgba(#000, .6);
      height:70rpx;
      padding:0 30rpx;
      text
      {display:block;
        line-height:70rpx;
        font-size:24rpx;
        opacity:.8;
        color:#fff;}
    }
  }
}

.classVideoListPage-content{
  padding: 0 20rpx;
  .classVideo-item{
    background-color: #ffffff;
    border-radius: 10rpx;
    margin-top: 30rpx;
    padding: 20rpx;
    .class_news_box_b
    {
      display: flex;
      justify-content: flex-start;
      font-size: 26rpx;
      color: #888;
      padding-top: 20rpx;
      .news_date{
        width: 60%;
      }
      .news_dz{
        width: 20%;
        text-align: right;

      }
      .news_zf{
        width: 20%;
        text-align: right;
      }
      .dzimg{
        width: 26rpx;
        height: 26rpx;
        margin-right: 20rpx;
      }
    }
    .class_news_box
    {
      display: flex;
      justify-content: flex-start;
      .new_img{
        width: 340rpx;
        height: 180rpx;
        ._img{
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .new_con{
        width: calc(100% - 160rpx);
        font-size: 30rpx;
        padding-right: 20rpx;
      }
    }
  }
}
</style>
